<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Input Group 输入框组  - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col-md">
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            默认
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <form class="e-form">
                        <div class="e-section">
                            <div class="e-section-info">
                                你可以在<code>div.input-group</code>内添加<code>.input-group-prepend</code>和<code>.input-group-append</code>在输入控件前或后添加文字或图标
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-email">
                                        Email：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend"><span class="input-group-text">@</span></div>
                                            <input type="text" id="example-email" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-url">
                                        Url：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <input type="text" id="example-url" class="form-control" placeholder="Url">
                                            <div class="input-group-append"><span class="input-group-text">.com</span></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-url-2">
                                        Url：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend"><span class="input-group-text">www.</span></div>
                                            <input type="text" id="example-url-2" class="form-control" placeholder="Url">
                                            <div class="input-group-append"><span class="input-group-text">.com</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            图标
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <form class="e-form">
                        <div class="e-section">
                            <div class="e-section-info">
                                你可以在<code>div.input-group</code>内添加<code>.input-group-prepend</code>和<code>.input-group-append</code>在输入控件前或后添加文字或图标
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-email-2">
                                        Email：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend"><span class="input-group-text"><i class="la la-at e-font-brand"></i></span></div>
                                            <input type="text" id="example-email-2" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-url-2-1">
                                        Url：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <input type="text" id="example-url-2-1" class="form-control" placeholder="Url">
                                            <div class="input-group-append"><span class="input-group-text"><i class="fa fa-atlas e-font-success"></i></span></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-url-2-2">
                                        Tips：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-alert e-font-danger"></i></span></div>
                                            <input type="text" id="example-url-2-2" class="form-control" placeholder="Tip">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            尺寸
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <form class="e-form">
                        <div class="e-section">
                            <div class="e-section-info">
                                你可以在<code>div.input-group</code>上添加<code>.input-group-lg</code>和<code>.input-group-sm</code>设置输入框组使用不同的尺寸
                            </div>
                            <div class="e-section-content">
                                <div class="e-separator e-separator--dashed"></div>
                                <div class="e-section-info"><code>.input-group-lg</code></div>
                                <div class="form-group row">
                                    <label class="col-form-label col-form-label-lg col-2" for="example-email-lg">
                                        lg：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group input-group-lg">
                                            <div class="input-group-prepend"><span class="input-group-text"><i class="la la-at"></i></span></div>
                                            <input type="text" id="example-email-lg" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                                <div class="e-separator e-separator--dashed"></div>
                                <div class="e-section-info"><code>默认</code></div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-email-default">
                                        default：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend"><span class="input-group-text"><i class="la la-at"></i></span></div>
                                            <input type="text" id="example-email-default" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                                <div class="e-separator e-separator--dashed"></div>
                                <div class="e-section-info"><code>.input-group-sm</code></div>
                                <div class="form-group row">
                                    <label class="col-form-label col-form-label-sm col-2" for="example-email-sm">
                                        sm：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-prepend"><span class="input-group-text"><i class="la la-at"></i></span></div>
                                            <input type="text" id="example-email-sm" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md">
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            图标 - 无背景边框
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <form class="e-form">
                        <div class="e-section">
                            <div class="e-section-info">

                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-2">
                                        左边：
                                    </label>
                                    <div class="col-10">
                                        <div class="e-input-icon e-input-icon--left">
                                            <input type="text" class="form-control" placeholder="Search...">
                                            <span class="e-input-icon-icon e-input-icon-icon--left">
                                                <span><i class="la la-search"></i></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2">
                                        右边：
                                    </label>
                                    <div class="col-10">
                                        <div class="e-input-icon e-input-icon--right">
                                            <input type="text" class="form-control" placeholder="Search...">
                                            <span class="e-input-icon-icon e-input-icon-icon--right">
                                                <span><i class="la la-search"></i></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-form-label-lg col-2">
                                        大尺寸：
                                    </label>
                                    <div class="col-10">
                                        <div class="e-input-icon e-input-icon--right">
                                            <input type="text" class="form-control form-control-lg" placeholder="Search...">
                                            <span class="e-input-icon-icon e-input-icon-icon--right">
                                                <span><i class="la la-search"></i></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-form-label-sm col-2">
                                        小尺寸：
                                    </label>
                                    <div class="col-10">
                                        <div class="e-input-icon e-input-icon--right">
                                            <input type="text" class="form-control form-control-sm" placeholder="Search...">
                                            <span class="e-input-icon-icon e-input-icon-icon--right">
                                                <span><i class="la la-search"></i></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            CheckBox/Radio
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <form class="e-form">
                        <div class="e-section">
                            <div class="e-section-info">
                                你可以在<code>div.input-group</code>内添加<code>.input-group-prepend</code>和<code>.input-group-append</code> > <code>span.input-group-text</code>
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-email-checkbox-1">
                                        Email：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <label class="e-checkbox e-checkbox--single">
                                                        <input type="checkbox" checked="">
                                                        <span></span>
                                                    </label>
                                                </span>
                                            </div>
                                            <input type="text" id="example-email-checkbox-1" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-email-checkbox-2">
                                        Email：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <label class="e-checkbox e-checkbox--single e-checkbox-brand">
                                                        <input type="checkbox" checked="">
                                                        <span></span>
                                                    </label>
                                                </span>
                                            </div>
                                            <input type="text" id="example-email-checkbox-2" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-email-checkbox-3">
                                        Email：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <label class="e-checkbox e-checkbox--single e-checkbox-success">
                                                        <input type="checkbox" checked="">
                                                        <span></span>
                                                    </label>
                                                </span>
                                            </div>
                                            <input type="text" id="example-email-checkbox-3" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-email-radio-1">
                                        Email：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <label class="e-radio e-radio--single">
                                                        <input type="radio" checked="">
                                                        <span></span>
                                                    </label>
                                                </span>
                                            </div>
                                            <input type="text" id="example-email-radio-1" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-email-radio-2">
                                        Email：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <label class="e-radio e-radio--single e-radio-brand">
                                                        <input type="radio" checked="">
                                                        <span></span>
                                                    </label>
                                                </span>
                                            </div>
                                            <input type="text" id="example-email-radio-2" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-email-radio-3">
                                        Email：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <label class="e-radio e-radio--single e-radio-success">
                                                        <input type="radio" checked="">
                                                        <span></span>
                                                    </label>
                                                </span>
                                            </div>
                                            <input type="text" id="example-email-radio-3" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            按钮
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <form class="e-form">
                        <div class="e-section">
                            <div class="e-section-info">
                                你可以在<code>div.input-group</code>内添加<code>.input-group-prepend</code>和<code>.input-group-append</code>在输入控件前或后添加按钮或下拉按钮
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-query-btn-1">
                                        按钮：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <button class="btn btn-secondary" type="button">搜索 <i class="la la-search"></i></button>
                                            </div>
                                            <input type="text" id="example-query-btn-1" class="form-control" placeholder="请输入关键字搜索">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-query-btn-2">
                                        按钮：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <input type="text" id="example-query-btn-2" class="form-control" placeholder="请输入关键字搜索">
                                            <div class="input-group-append">
                                                <button class="btn btn-secondary" type="button">搜索 <i class="la la-search"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-query-btn-3">
                                        下拉：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    搜索
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">搜索</a>
                                                    <a class="dropdown-item" href="#">清空</a>
                                                    <div role="separator" class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">下拉选项1</a>
                                                    <a class="dropdown-item" href="#">下拉选项2</a>
                                                </div>
                                            </div>
                                            <input type="text" id="example-query-btn-3" class="form-control" placeholder="请输入关键字搜索">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-query-btn-4">
                                        下拉：
                                    </label>
                                    <div class="col-10">
                                        <div class="input-group">
                                            <input type="text" id="example-query-btn-4" class="form-control" placeholder="请输入关键字搜索">
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    搜索
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">搜索</a>
                                                    <a class="dropdown-item" href="#">清空</a>
                                                    <div role="separator" class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">下拉选项1</a>
                                                    <a class="dropdown-item" href="#">下拉选项2</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>